import { Drawer, Button, Checkbox } from 'antd';
import type { FC } from 'react';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import './index.less';
interface Props {
  data: any[]; // 课时数据
  onSubmit: (values: any[]) => boolean | Promise<boolean>; // 提交时触发，返回true或Promise<true>关闭弹窗
  defaultSelected?: any[]; // 默认已选中的课时
  chapterIndex: number | string;
  style?: React.CSSProperties;
}
const Index: FC<Props> = ({
  data = [1, 2, 3, 4, 5, 6, 7],
  onSubmit,
  defaultSelected = [],
  children,
  chapterIndex,
  style,
}) => {
  const [visible, setVisible] = useState(false);
  const [list, setList] = useState<any[]>([]); // todo 如果data格式较麻烦，选用该对象格式化data数据
  const [showAll, setShowAll] = useState(true);
  const [showList, setShowList] = useState<any[]>([1, 2, 3, 4, 5, 6, 7]);
  const [selected, setSelected] = useState<any[]>([]);
  const onOk = async () => {
    const result = await onSubmit(selected);
    if (result) {
      setVisible(false);
    }
  };
  const onChecked = (evt) => {
    setShowAll(!evt.target.checked);
  };
  const onSelect = (current) => {
    if (selected.indexOf(current.lid) !== -1) {
      setSelected(selected.filter((lid) => lid !== current.lid));
    } else {
      setSelected([...selected, current.lid]);
    }
  };
  useEffect(() => {
    if (showAll) {
      setShowList(data);
    } else {
      // todo 过滤已选择的课时
      setShowList(data);
    }
  }, [showAll]);
  useEffect(() => {
    if (visible) {
      console.log(data);
      setSelected(defaultSelected);
      setShowList(data);
      setList(data);
    }
  }, [visible]);
  return (
    <>
      <Drawer
        title={`添加课时 — 第${chapterIndex}章`}
        className="c-drawer-container"
        width={410}
        zIndex={1312}
        visible={visible}
        onClose={() => setVisible(false)}
        footer={
          <div>
            <span>
              已选择<span className="text-yellow">{selected.length}</span>个视频
            </span>
            <Button
              onClick={onOk}
              style={{ width: 120, height: 44, marginLeft: 12 }}
              size="large"
              type="primary"
            >
              添加至课程
            </Button>
          </div>
        }
      >
        <div>
          {/* <div className="add-lesson-drawer-checkbox-container">
            <Checkbox onChange={onChecked}>只显示未被添加的</Checkbox>
          </div> */}
          <div className="add-lesson-drawer-items-container">
            {showList.map((item) => {
              return (
                <div
                  key={item.displayorder}
                  className={classnames('add-lesson-drawer-item', {
                    'add-lesson-drawer-item-selected': selected.indexOf(item.lid) !== -1,
                    'add-lesson-drawer-item-disabled': item.lid === 4,
                  })}
                  onClick={
                    // todo 判断如果为 disabled不去调用方法
                    () => onSelect(item)
                  }
                >
                  <span>
                    <span>课时：</span>
                    <span>{item.displayorder}</span>
                  </span>
                  <span>{item.name}</span>
                </div>
              );
            })}
          </div>
        </div>
      </Drawer>
      <span
        className={
          !children
            ? 'c-lecturer-chapter-card c-lecturer-chapter-card-add'
            : 'c-lecturer-chapter-add-container'
        }
        style={style}
        onClick={() => setVisible(true)}
      >
        {children || <span>+添加课时</span>}
      </span>
    </>
  );
};
export default Index;
